<template>
	<view class="beijingse">
		<u-modal :show="show" :title="title" @confirm="confirm" @cancel="cancel" showCancelButton="true"></u-modal>
		<header-top :messageInfo="{typeFlag:false,message:'购物车',liner:true}"></header-top>
		<view class="jianbian"></view>
		<view class="kym" v-if="totalNum==0">
			<image src="../../static/image/system/zwsp.png" mode=""></image>
		</view>
		<view class="neirong mainpadding">
			<view class="ffffff radius flexleft mainpadding margin_top dingwei" v-for="(item,index) in list"
				:key="item.id" >
				<view class="shancbox" @click.stop="delcart(item.id)">
					<view class="gwucsc"></view>
				</view>
				<view class="flexleft" style="width: 44%;">
					<view style="height: 182rpx;" class="flexleft" @click.stop="selectitem(item)">
						<!-- 已勾选 -->
						<view class="gouxuan margin_right2" v-show="item.isChecked"></view>
						<!-- 未勾选 -->
						<view class="huigx margin_right2" v-show="!item.isChecked"></view>
					</view>
					<view class="shilitu margin_right3" @click="todetail(item.id)">
						<image :src="item.image_text" mode=""></image>
					</view>
				</view>
				<view class="rtbox" @click="todetail(item.id)">
					<view class="titletext xiankuan">{{item.name}}</view>
					<view class="flexbetween margin_top2">
						<view class="huangsetext margin_right2">¥{{item.price}}</view>
						<view class="jiajian">
							<view class="jianhao" @click.stop="minus(index,item.buy_num,item.id)">
								<!-- <view class="jianhao" ></view> -->
								<view class="line"></view>
							</view>
							<view class="xhtext">{{item.buy_num}}</view>
							<!-- <input type="number" class="xhtext" v-model="item.buy_num" style="width: 60rpx;text-align: center;"> -->
							<view class="jiahao" @click.stop="add(index,item.buy_num,item.id)"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="" v-if="totalNum!=0">
			<view class="gudingdb ffffff mainpadding">
				<view class="flexbetween">
					<view class=" flexleft">
						<view :class="quan?'gouxuan margin_right1':'hyuan margin_right1'" @click="qxstatus"></view>
						<view class="notitletext margin_right1">全选</view>
						<view class="bightext">¥{{totalPrice}}</view>
					</view>
					<view class="jsbtn" @click="tzqrdd">去结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				quan: false,
				list: [],
				totalPrice: '0.00', //总价格
				totalNum: '', //总数量
				status: 0,
				show: false,
				title: '此商品仅剩一件了，您确定要移除吗？',
				delid: '', //删除商品id
			}
		},
		onLoad() {
			this.getdata();
		},
		watch: {
			list: {
				deep: true,
				handler(newval) {
					let num = 0
					newval.forEach(item => {
						if (item.isChecked) {
							num = Number(num) + Number(item.price) * Number(item.buy_num)
						}
					})
					this.totalPrice = num
				}
			}
		},
		methods: {
			todetail(id){
				uni.navigateTo({
					url:'/pages/homepage/shangpinxq?id=' + id,
				})
			},
			// 跳转确认订单
			tzqrdd() {
				let data = {
					goodsinfo: [],
					type: "cart" //car购物车，detail详情
				}
				this.list.forEach(item => {
					if (item.isChecked) {
						data.goodsinfo.push({
							goodsId: item.id,
							specType: 0,
							num: item.buy_num
						})
					}
				})
				if (data.goodsinfo.length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/homepage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			delcart(id) {
				let _this = this;
				let arr = [];
				arr.push({
					goodsId: id
				});
				httpRequest.modal('提示','确认删除当前数据吗？', true, (res) => {
					if(res){
						httpRequest.request('api/cart/remove', 'POST', {
							data: arr,
						}).then(res => {
							httpRequest.toast(res.msg);
							this.getdata();
						})
					}
				})
				
			},
			cancel() {
				this.show = false;
			},
			confirm() {
				let _this = this;
				let arr = [];
				arr.push({
					goodsId: _this.delid
				});
				httpRequest.request('api/cart/remove', 'POST', {
					data: arr,
				}).then(res => {
					httpRequest.toast(res.msg);
					_this.show = false;
					this.getdata();
				})
			},
			jstotalPrice() {
				let _this = this;
				_this.totalPrice = 0;
				_this.list.forEach(item => {
					_this.totalPrice += item.buy_num * item.price
				})
			},
			changeNum(id, num) {
				let _this = this;
				httpRequest.request('api/cart/update', 'POST', {
					goods_id: id,
					num: num,
				}).then(res => {
					if (res.code == 1) {
						console.log(res);
						_this.status = 1;
						_this.jstotalPrice();
					}
				})
			},
			add(index, num, id) {
				let _this = this;
				if (_this.status == 0 || _this.status == 1) {
					_this.status == 2;
					num++;
					console.log(_this.list[index]);
					_this.list[index].buy_num = num;
					// _this.changeNum(id,num);
				} else {
					httpRequest.toast('慢点')
				}

			},
			minus(index, num, id) {
				let _this = this;
				if (_this.status == 0 || _this.status == 1) {
					_this.status == 2;
					if (num == 1) {
						_this.delid = id;
						_this.show = true;
						console.log('不能减了')
						return
					}
					num--;
					console.log(_this.list[index]);
					_this.list[index].buy_num = num;
					// _this.changeNum(id,num);
				} else {
					httpRequest.toast('慢点')
				}
			},
			//全选
			qxstatus() {
				let _this = this;
				_this.quan = !_this.quan;
				if (_this.quan) {
					_this.list.forEach(item => {
						item.isChecked = true;
					})
				} else {
					_this.list.forEach(item => {
						item.isChecked = false;
					})
				}

			},
			//勾选中
			selectitem(item) {
				let _this = this;
				item.isChecked = !item.isChecked;
				if (item.isChecked) {
					let status = 0;
					_this.list.forEach(ite => {
						if (!ite.isChecked) {
							status = 1
						}
					})
					if (status == 0) {
						_this.quan = true;
					}
				} else {
					_this.quan = false;
				}

			},
			getdata() {
				let _this = this;
				httpRequest.request('api/cart/info', 'POST', {}).then(res => {
					let totalprice = 0;
					res.data.goodsList.forEach(item => {
						Object.assign(item, {
							isChecked: false
						});
					})
					_this.list = res.data.goodsList;
					_this.totalNum = res.data.total;
					// _this.jstotalPrice();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.neirong {
		padding-bottom: 168rpx;
	}

	// .beijingse {
	// 	min-height: calc(100vh - 140rpx);
	// }

	.kym {
		margin: 250rpx auto 0;
		width: 319rpx;
		height: 267rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.gwucsc {
		width: 18rpx;
		height: 18rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/gwcshanchu.png');
	}

	.shancbox {
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 0;
		width: 58rpx;
		height: 34rpx;
		background: rgba(183, 183, 183, .1);
		border-radius: 0rpx 14rpx 0rpx 14rpx;
	}

	.rtbox {
		width: 56%;
	}

	.gudingdb {
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		bottom: 0rpx;
		/*#endif*/
		/*#ifdef H5*/
		bottom: 100rpx;
		/*#endif*/
		position: fixed;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.jsbtn {
		border-radius: 120rpx;
		background-color: #fd463e;
		height: 76rpx;
		width: 226rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.bightext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF8110;
	}

	.hyuan {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid #999999;
	}

	.gouxuan {
		width: 36rpx;
		height: 36rpx;
		background-size: 100%;
		background-image: url('../../static/image/system/gouxuan.png');
	}

	.huigx {
		width: 33rpx;
		height: 33rpx;
		border: 1rpx solid #555;
		border-radius: 50%;
	}


	.jiahao {
		background-size: 100% 100%;
		width: 21rpx;
		height: 19rpx;
		position: absolute;
		top: 14rpx;
		right: 12rpx;
		background-image: url('../../static/image/system/jiahao.png');
	}

	.jianhao {
		width: 22rpx;
		position: absolute;
		left: 13rpx;
		// height: 3.5rpx;
		top: 20rpx;
		height: 20rpx;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.xhtext {
		font-size: 31rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #EF8933;
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 164rpx;
		height: 46rpx;
		position: relative;
		border-radius: 20rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/jiajian.png');
	}

	.huangsetext {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF8110;
	}

	.huisetext {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.yuan {
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background: #EF8933;
	}

	.shilitu {
		width: 182rpx;
		height: 182rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}
</style>
